<template>
  <el-config-provider :locale="zhCn">
    <el-container class="layout">
      <el-header class="layout-header">
        <img
          src="@/assets/images/logo.png"
          alt="logo"
          @click="$router.push('/')"
        />
        <el-menu
          class="menu"
          :default-active="defaultActive"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          router
        >
          <el-menu-item
            v-for="menu in menus"
            :index="menu.path"
          >
            {{ menu.meta.title }}
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main class="layout-main">
        <div class="w-full h-full">
          <el-scrollbar>
            <div class="layout-main-wrap">
              <router-view></router-view>
            </div>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
  </el-config-provider>
</template>

<script setup>
import menuRoutes from "@/router/route.menu";
import { getDicFromApi } from "@/utils/dict/index";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const Route = useRoute();
const menus = ref(menuRoutes);
const defaultActive = computed(() => Route.path);

/* S detail-store S */
const detailInfo = ref({
  recordId: 339939,
  coverEmpty: true,
  cover: "img/index02.c8ba75ea.png",
});
const detailInfoUpdate = (data) => {
  detailInfo.value = data;
};
provide("detail-store", {
  detailInfo,
  detailInfoUpdate,
});
/* E detail-store E */
onMounted(() => {
  getDicFromApi();
});
</script>

<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100vh;
  background: #fff3e2;

  &-header {
    --el-header-height: fit-content;
    // border-bottom: 4px solid #fff;
    background-image: url("@/assets/images/top-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: green;
    .menu {
      --el-menu-hover-bg-color: transparent;
      --el-menu-bg-color: transparent;
      --el-menu-text-color: #fff;
      --el-menu-active-color: #fff;
      justify-content: flex-end;
      border-bottom: unset;
    }
  }
  &-main {
    --el-main-padding: unset;
    &-wrap {
      max-width: 1800px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      // background: green;
      overflow: hidden;
    }
  }
}
</style>

<style>
.main{
    width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>